<template>
    <div>
        <breadcrumb></breadcrumb>

        <!-- 列表 -->
        <div class="main">
            <div class="main_head">
                <div class="main_head_left">
                    已选择<span style="color: #1890ff">2</span>项
                </div>
                <div class="main_head_right">
                    <button class="addCargoOwner" @click="visibleAddBox = true">
                        <i class="el-icon-plus iconBtn"></i>
                        <span>新增</span>
                    </button>
                    <button class="addCargoOwner">
                        <i class="iconfont icon-lajitong iconBtn"></i>
                        <span>删除</span>
                    </button>

                </div>
            </div>
            <div class="list">
                <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="left">
                    <el-table-column align="left" type="selection" width="50"></el-table-column>
                    <el-table-column align="left" prop="SerialNumber" width="80" label="序号">
                    </el-table-column>
                    <el-table-column align="left" prop="name" label="角色"></el-table-column>
                    <el-table-column align="left" prop="abbreviation" label="调度"></el-table-column>
                    <el-table-column align="left" prop="location" label="备注">
                    </el-table-column>
                    <el-table-column align="left" prop="headName" label="操作人">
                    </el-table-column>

                    <el-table-column align="left" prop="headTel" label="操作时间">
                    </el-table-column>
                    <el-table-column align="left" label="操作" width="153">
                        <template >
                            <div>
                                <el-button type="text" size="small" @click="showPermissionDialog()">权限设置</el-button>
                                <el-button type="text" size="small">编辑</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </div>
        <el-dialog class="dialog" title="新增角色" :visible.sync="visibleAddBox" width="458px">
            <el-form ref="addRoleForm" :model="addRoleForm" :rules="addRoleRules" label-width="70px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="角色名称" prop="RoleValue" class="roleSelectBox">
                            <el-select v-model="addRoleForm.RoleValue" filterable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="notes" class="notes">
                            <el-input v-model="addRoleForm.notes" resize="none" :rows="2" type="textarea"
                                maxlength="200"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="display: flex;justify-content: flex-end;">
                        <el-button class="cancelBtn" @click="visibleAddBox = false">取 消</el-button>
                        <el-button class="submitBtn" type="primary" @click="addSubmitRole">确 定</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <el-dialog class="PermissionDialog" title="权限设置" :visible.sync="visiblePermissionBox" width="860px">
            <div class="dialogMain">
                <div>角色:普通用户</div>
                <div class="PermissionTable">
                    <el-table ref="multipleTable" :data="PermissionRouteData" tooltip-effect="dark" style="width: 100%"
                        @selection-change="PermissionSelectionChange">
                        <el-table-column label="模块" width="120" prop="module">
                            <template slot-scope="scope">
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                                    @change="handleCheckAllChange">{{ scope.row.module }}</el-checkbox>
                            </template>

                        </el-table-column>
                        <el-table-column prop="Permission" label="权限">
                            <template slot-scope="scope">
                                <div class="checkedBox">
                                    <el-checkbox-group v-model="scope.row.authority" @change="handleCheckedCitiesChange">
                                        <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city
                                        }}</el-checkbox>
                                    </el-checkbox-group>
                                </div>

                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>
        </el-dialog>
        <div>
            <el-button type="text" size="small" @click="showPermissionDialog()">权限设置</el-button>
            <el-button type="text" size="small">编辑</el-button>
        </div>
    </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb.vue";
import router from "@/router";
import httpApi from "@/http";

const PermissionData = [{
    module: "货主管理",
    authority: [{ lable: "新增/编辑承运货主", value: "1-1" },
    { lable: "货主列表1", value: "1-3" },
    { lable: "货主列表2", value: "1-4" },
    { lable: "货主列表3", value: "1-5" },
    { lable: "货主列表4", value: "1-6" }],
    checkAll: false,

}, {
    module: "合同管理",
    authority: [{ lable: "新增/编辑承运货主", value: "2-1" },
    { lable: "合同列表", value: "2-2" },
    { lable: "新增/编辑合同", value: "2-3" }],
    checkAll: false,
}, {
    module: "财务管理",
    authority: [{ lable: "调度", value: "3-1" },
    { lable: "财务管理-1", value: "3-2" },
    { lable: "财务管理-2", value: "3-3" }],
    checkAll: false,
}];
export default {

    data() {
        return {
            records: [],
            data: {},
            enterpriseName: "", //企业名称 值
            visibleAddBox: false,
            visiblePermissionBox: false,

            options: [{
                value: '选项1',
                label: '超级管理员'
            }, {
                value: '选项2',
                label: '普通用户'
            }, {
                value: '选项3',
                label: '财务'
            }, {
                value: '选项4',
                label: '调度'
            }, {
                value: '选项5',
                label: '管理员'
            }],

            addRoleForm: {
                RoleValue: "",
                notes: "",
            },
            addRoleRules: {
                RoleValue: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                notes: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
            },

            isIndeterminate: true,
            PermissionArr: PermissionData ,



            multipleSelection: [],
            PermissionRouteData:[]


        };
    },
    methods: {
        getList() {
            let params = {
                current: this.pageCurrent,
                size: this.pageSize,
                name: this.enterpriseName,
            };
            ////console.log(params);
            httpApi.cargoOwnerApi.getAcceptCarriageList(params).then((res) => {
                ////console.log("列表", res);
                this.records = res.data.data.records;

                this.data = res.data.data;
                // 前端解决序号
                this.records.forEach((item, i) => {
                    let num = i + 1 + Number(this.pageSize) * (this.pageCurrent - 1);
                    item.SerialNumber = num < 10 ? "0" + num : num;
                });
                ////console.log(res.data.data.records);
            });
        },
        addSubmitRole() {

        },
        handleSelectionChange() {

        },

        getPermissionData() {
            this.PermissionRouteData = PermissionData
            ////console.log(PermissionData);

        },


        showPermissionDialog(id) {
            this.visiblePermissionBox = true
        },
        PermissionSelectionChange() {

        },

        // 全选

        handleCheckAllChange(val) {
            ////console.log(val);
            this.checkedCities = val ? PermissionData : [];
            this.isIndeterminate = false;
        },

        handleCheckedCitiesChange(value) {
            ////console.log('111',value);
            let checkedCount = value.length;
            PermissionData[0].checkAll = checkedCount === this.PermissionArr.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.PermissionArr.length;
        }




    },
    created(){
        this.getPermissionData()
    },
    mounted() {
        //this.getList();
        this.getPermissionData()
    },
    components: {
        breadcrumb,
    },
};
</script>
  
<style lang="scss" scoped>
.main {
    width: 100%;
    height: calc(100vh - 212px);
    background-color: #fff;
    padding: 0px 30px 40px 30px;

    .main_head {
        display: flex;
        justify-content: space-between;
        height: 64px;
        align-items: center;

        .main_head_left {
            font-size: 12px;
            color: #262626;
        }

        .main_head_right {
            .addCargoOwner {
                background-color: #1890ff;
                border-radius: 4px;
                height: 32px;
                color: #ffffff;
                font-size: 12px;
                padding: 8px 17px 9px 17px;
                transition: 0.2s;
                cursor: pointer;
                margin-right: 17px;

                .iconBtn {
                    margin-right: 7px;
                    font-size: 12px;
                }

                &:hover {
                    opacity: 0.8;
                }
            }

        }
    }

    .list {
        height: calc(100% - 112px);


        ::v-deep .el-table__body-wrapper {
            max-height: calc(100vh - 414px) !important;
            overflow-y: scroll;
        }

        // 表头样式
        ::v-deep .el-table__header th {
            background-color: #f0f6fd;
            color: #262626;
            font-size: 12px;
            font-weight: bold;
            text-align: left;
            height: 48px;
            padding: 0;

            // 表 body的td
            ::v-deep .el-table__body td {
                color: #595959;
                font-size: 12px;
            }
        }

        .stateBtns {
            height: 30px;

            ::v-deep .el-button {
                font-size: 12px;
                border: none;
                width: 76px;
                height: 30px;
                margin: 0 auto;
                box-sizing: border-box;
            }

            .icon-dian {
                font-size: 12px;
            }

            .Pass {
                background-color: #ecf5fe;
                color: #1890ff;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 10px 10px 9px;
            }

            .noPass {
                background-color: #fde8e9;
                color: #f7555d;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

}

.dialog {

    // 标题
    ::v-deep .el-dialog__header {
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 20px;
        color: #262626;
        font-size: 14px;
        font-weight: bold;
        height: 50px;
    }

    ::v-deep .el-dialog__title {
        font-size: 14px;
        color: #303133;
        font-weight: bold;
    }

    //关闭图标
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
        font-size: 15px;
    }

    ::v-deep .el-dialog__body {
        padding: 25px 40px 24px;
    }

    //   表格
    ::v-deep .el-form-item__label {
        line-height: 32px;
        font-size: 12px;
        color: #262626;
        padding-top: 4px;
        width: 100%;
    }

    ::v-deep .el-input__inner {
        line-height: 32px;
        height: 32px;
        padding: 0 10px;
    }







    .cancelBtn {
        width: 80px;
        height: 36px;
        border: 1px solid #d9d9d9;
        color: #262626;
        font-size: 12px;
        border-radius: 4px;
        background-color: #fff;
    }

    .submitBtn {
        background-color: #1890ff;
        width: 80px;
        height: 36px;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
    }

    .inputSelect_left {
        height: 32px;

        ::v-deep .el-input__inner {
            border-radius: 4px 0px 0px 4px;
        }

    }

    .inputSelect_right {
        height: 32px;

        ::v-deep .el-input__inner {

            border-radius: 0px 4px 4px 0px;
            border-left: none;
            background-color: #F5F7FA;
            font-size: 12px;
            color: #606266;

        }


    }

    ::v-deep .el-input__icon {
        line-height: 0;
    }

    ::v-deep .el-form-item__content {
        line-height: 0;
    }

    .notes ::v-deep .el-textarea .el-input__count {
        bottom: 15px;
        color: #C0C4CC;
    }




}
</style>
  